<template>
	<view class="table-main">
			<table class="gridtable">
				<thead>
					<tr class="title">
						<td class="title-th" style="width: 100upx;height: 50upx;">编号</td>
						<td class="title-th" style="width: 200upx;height: 50upx">用户名</td>
						<td class="title-th" style="width: 200upx;height: 50upx">手机号</td>
						<td class="title-th" style="width: 200upx;height: 50upx">店号</td>
						<td class="title-th" style="width: 200upx;height: 50upx">店名</td>
						<td class="title-th" style="width: 300upx;height: 50upx">参加日期</td>
						<td class="title-th" style="width: 200upx;height: 50upx">打卡状态</td>
						<td class="title-th" style="width: 200upx;height: 50upx">核销状态</td>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item,index) in info">
						<td class="body-td" style="width: 100upx;height:30upx">{{index+1}}</td>
						<td class="body-td" style="width: 200upx;height:30upx">{{item}}</td>
						<td class="body-td" style="width: 200upx;height:30upx">{{item}}</td>
						<td class="body-td" style="width: 200upx;height:30upx">{{item}}</td>
						<td class="body-td" style="width: 200upx;height:30upx">{{item}}</td>
						<td class="body-td" style="width: 300upx;height:30upx">{{item}}</td>
						<td class="body-td" style="width: 200upx;height:30upx">{{item ? '已打卡':'未打卡'}}</td>
						<td class="body-td" style="width: 200upx;height:30upx">{{item ? '已核销':'未核销'}}</td>
					</tr>
				</tbody>
			</table>
		</view>
</template>

<script>
	export default {
		data(){
			return {
				info:[11,22,33,44,55,66,77,88,88,88,88,88,88,88,88,88,8888,88,88,88,88,88,88,88,88,88,8888,88
				,88,88,88,88,88,88,88,88,8888,88,88
				]
			}
		}
	}
</script>

<style>
	.table-main {
			overflow: auto;
		}
		table.gridtable {
			width: auto;
			height: auto;
		    font-family: verdana,arial,sans-serif;
		    font-size:11px;
		    color:#333333;
		    border-width: 1px;
		    border-color: #666666;
		    border-collapse: collapse;
		}
		table.gridtable thead, tbody tr {
			display: flex;
		}
		.title-th {
			text-align: center;
			font-size: 14px;
			font-weight: bold;
		}
		.body-td {
			flex-shrink: 0;
			height: 50upx;
			display: flex;
		}
		table.gridtable tbody{
			display: block;
			height: 95vh;
			overflow: auto;
		}
		table.gridtable th {
		    padding: 8px;
		    background-color: #dedede;
			white-space: nowrap;
			border: 1px solid #000;
		} 
	
		table.gridtable td {
			height: 3.66upx;
			white-space: nowrap;
		    padding: 5.33upx;
			padding-right: 16.66upx;
			border-bottom: 1px solid #666;
			border-left: 1px solid #666;
		    background-color: #ffffff;
		}

</style>